<template>
    <div class="login">
        <div class="main">
            <div class="header-box">
                <img src="@/assets/img/logo.png" class="header-img" />
                <div class="header-font">泰州儿童系统</div>
            </div>
            <div class="form-box">
                <van-form
                    ref="formRef"
                    class="my-form"
                    :show-error-message="false"
                    label-width="25vw"
                    @submit="onSubmit"
                    @failed="onFailed"
                >
                    <van-field
                        v-model="formData.username"
                        center
                        name="username"
                        label="账号"
                        placeholder="账号"
                        :rules="[{ required: true, message: '请填写账号' }]"
                    ></van-field>
                    <van-field
                        v-model="formData.password"
                        type="password"
                        center
                        name="password"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <van-field
                        v-model="formData.captchaText"
                        center
                        name="captchaText"
                        label="验证码"
                        placeholder="验证码"
                        :rules="[{ required: true, message: '请填写验证码' }]"
                    >
                        <template #button>
                            <van-image class="my-image" fit="fill" :src="captchaImg" @click="getCaptcha"></van-image>
                        </template>
                    </van-field>
                    <van-button :loading="loading" round type="primary" native-type="submit" class="my-button">
                        提交
                    </van-button>
                </van-form>
            </div>
        </div>
        <div class="footer">所属单位：泰州市民政局 联系电话：0523-86198830</div>
    </div>
</template>

<script lang="ts" setup>
    import md5 from 'js-md5';
    import { getCaptchaApi, loginApi } from '@/apis';
    const loading: Ref<boolean> = ref(false);
    const captchaImg: Ref<string> = ref('');
    const formRef: Ref<any> = ref(null);
    const formData: Ref<any> = ref({
        username: '',
        password: '',
        captchaText: '',
    });
    onMounted(() => {
        getCaptcha();
    });
    const getCaptcha = () => {
        getCaptchaApi().then((res) => {
            captchaImg.value = 'data:image/jpeg;base64,' + res;
        });
    };

    const onFailed = (value) => {
        showDialog({
            title: '提示',
            message: value.errors[0].message,
        });
    };
    const onSubmit = async (value) => {
        // showLoadingToast({
        //     message: '加载中...',
        //     forbidClick: true,
        //     duration: 0
        // });
        loading.value = true;
        loginApi({
            username: formData.value.username,
            password: md5(JSON.parse(JSON.stringify(formData.value.password))),
            captcha: formData.value.captchaText,
        })
            .then((res) => {
                // closeToast();
                loading.value = false;
                // 如果没有 router没有 redirect，跳转到主页，主要针对直接进入login页面登录跳转不了
                if (!route.query.redirect) {
                    router.push({
                        path: '/',
                    });
                } else {
                    router.push({
                        path: route.query.redirect,
                    });
                }
            })
            .catch((error) => {
                loading.value = false;
                // closeToast();
                // showDialog({
                //     title: '提示',
                //     message: '网络异常，请稍后重试！',
                // })
            });
    };
</script>

<style lang="scss" scoped>
    .login {
        /* background-size: 100% 100%; */
        /* background: url(../assets/img/bg/bg1.png) right bottom no-repeat / 650px,
              url(../assets/img/bg/bg2.png) 0px 0px no-repeat rgba(22, 121, 190, 1) / 500px 580px; */
        background: url(@/assets/img/bg/bg-2.png);
        // background-size: 100% 100%;
        // background-color: #447bca;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .header-box {
        // display: flex;
        // justify-content: center;
        // position: relative;
        padding-top: 40px;
        .header-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .header-font {
            font-size: 25px;
            margin-top: 10px;
            color: #fff;
        }
    }
    .form-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
    }
    .my-form {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
        overflow: hidden;
        padding: 20px 0;
        .my-button {
            margin-top: 20px;
            width: 80%;
        }
        .my-image {
            width: 80px;
            height: 40px;
        }
    }

    .footer {
        font-size: 14px;
        padding: 10px;
        color: #fff;
    }
</style>
